<template>
    <div class="CompontensViews">
        <div class="scroo">
            <div class="row">
                <div class="label">{{ Data.subLabel[0].label }}</div>
                <div class="ipt">
                    <el-input class="short-ipt yellow right" readonly v-model="Data.subLabel[0].values[1]"></el-input>
                    <span>年</span>
                    <el-input class="long-ipt yellow" readonly v-model="Data.subLabel[0].values[2]"></el-input>
                    <span>年/月</span>
                </div>
            </div>
            <div class="row">
                <div class="label">{{ Data.subLabel[1].label }}</div>
                <div class="ipt">
                    <div class="label">ランク</div>
                    <el-select class="select-ipt" placeholder=" " v-model="Data.subLabel[1].values[1]">
                        <el-option v-for="item in Data.subLabel[1].combos" :key="item" :label="item.label"
                            :value="item.code"></el-option>
                    </el-select>
                    <span>年</span>
                    <el-input class="short-ipt right" v-model="Data.subLabel[1].values[2]"
                        @input="Data.subLabel[1].values[2] = Number($setMyNum(Data.subLabel[1].values[2], '2 - 0')) == 0 ? null : Number($setMyNum(Data.subLabel[1].values[2], '2 - 0'))"
                        @blur="BlurFn(1)"></el-input>
                    <span>年</span>
                    <el-input class="long-ipt yellow" readonly v-model="Data.subLabel[1].values[3]"></el-input>
                    <span>年/月</span>
                </div>
            </div>
            <div class="row">
                <div class="label">{{ Data.subLabel[2].label }}</div>
                <div class="ipt">
                    <el-input class="long-ipt yellow" readonly v-model="Data.subLabel[2].values[1]"></el-input>
                    <span>年/月</span>
                </div>
            </div>
            <div class="row">
                <div class="label" style="white-space: nowrap;">{{ Data.subLabel[3].label }}</div>
                <div class="ipt">
                    <div class="label" style="font-weight: 700;">周期設定係数</div>
                    <el-input class="short-ipt right" v-model="Data.subLabel[3].values[1]"
                        @input="Data.subLabel[3].values[1] = formateFn(Data.subLabel[3].values[1])"
                        @blur="BlurFn(2)"></el-input>
                    <span></span>
                    <el-input class="long-ipt yellow" readonly v-model="Data.subLabel[3].values[2]"></el-input>
                    <span>年/月</span>
                </div>
            </div>
            <div class="row">
                <div class="label">{{ Data.subLabel[4].label }}</div>
                <div class="ipt">
                    <el-input class="short-ipt yellow right" readonly v-model="Data.subLabel[4].values[1]"></el-input>
                    <span>年</span>
                    <el-input class="long-ipt yellow" readonly v-model="Data.subLabel[4].values[2]"></el-input>
                    <span>年/月</span>
                </div>
            </div>
            <div class="row">
                <div class="label">{{ Data.subLabel[5].label }}</div>
                <div class="ipt">
                    <el-input class="long-ipt yellow" readonly v-model="Data.subLabel[5].values[1]"></el-input>
                    <span>年/月</span>
                </div>
            </div>
            <div class="row">
                <div class="label">{{ Data.subLabel[6].label }}</div>
                <div class="ipt">
                    <el-input class="short-ipt yellow right" readonly v-model="Data.subLabel[6].values[1]"></el-input>
                    <span>年</span>
                    <el-input class="long-ipt yellow" readonly v-model="Data.subLabel[6].values[2]"></el-input>
                    <span>年/月</span>
                </div>
            </div>

            <div class="row">
                <div class="label" style="font-weight: 700;">{{ Data.subLabel[7].label }}</div>
                <div class="ipt"
                    style="width: 41%;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;padding: 8px 0;justify-content: space-between;">
                    <div class="label">次回開放検査年（案）</div>
                    <div style="display: flex;align-items: center;">
                        <el-input class="long-ipt yellow" readonly v-model="Data.subLabel[7].values[1]"></el-input>
                        <span></span>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="label" style="font-weight: 700;">{{ Data.subLabel[8].label }}</div>
                <div class="ipt" style="width: 41%;justify-content: space-between;">
                    <div class="label">次回開放検査年（見直し後）</div>
                    <!-- <el-input class="long-ipt" v-model="Data.subLabel[8].values[1]"></el-input> -->
                    <div style="display: flex;align-items: center;">
                        <el-date-picker v-model="Data.subLabel[8].values[1]" type="month" :format="format"
                            :value-format="format" placeholder=" " class="picker">
                        </el-date-picker>
                        <span></span>
                    </div>
                </div>
            </div>

            <div class="bs-tabs">
                <el-button :type="activeFlag == index ? 'primary' : ''" size="small" v-for="(value, index) in tabs_list"
                    :key="index" @click="activeFlag = index">
                    {{ value.title }}
                </el-button>
            </div>

            <el-input type="textarea" resize="none" :rows="6" class="iptarea" v-if="activeFlag == 0"
                v-model="Data.equipGenEvation"
                @input="Data.equipGenEvation = $setMaxLength(Data.equipGenEvation, 1400)"></el-input>
            <el-input type="textarea" resize="none" :rows="6" class="iptarea yellow" readonly v-if="activeFlag == 1"
                v-model="Data.summaryOfResults"
                @input="Data.summaryOfResults = $setMaxLength(Data.summaryOfResults, 1400)"></el-input>
            <el-input type="textarea" resize="none" :rows="6" class="iptarea yellow" readonly v-if="activeFlag == 2"
                v-model="Data.nextTime" @input="Data.nextTime = $setMaxLength(Data.nextTime, 1400)"></el-input>

        </div>
    </div>
</template>

<script>
import { GetComprehensiveEvaluationData, UpdComprehensiveValue } from "@/api/api";
import _ from 'lodash-es';
export default {
    name: "BasicStyleCompontens",
    props: ["PltCode", "Code", "Label", "dmgCode"],
    data() {
        return {
            tabs_list: [
                { title: "総合評価", },
                { title: "結果要約", },
                { title: "次回対策", },
            ],
            activeFlag: 0,
            prposTabelData: [],
            Data: {},
            DataClone: {},
            isAddFlg: false,
            format: 'yyyy-MM',
            handleRow: {},
        };
    },
    components: {
    },
    watch: {
        PltCode: {
            handler(newName, oldName) {
                this.GetComprehensiveEvaluationDataFn();
            },
            immediate: true,
            deep: true,
        },
        Code: {
            handler(newName, oldName) {
                console.log(this.Code, 111);
                this.GetComprehensiveEvaluationDataFn();
            },
            immediate: true,
            deep: true,
        },
        Data: {
            handler(newName, oldName) {
                console.log(this.Data, this.DataClone);
                this.$emit('isChangeFlgFn', _.isEqual(this.Data, this.DataClone))
            },
            immediate: true,
            deep: true,
        },
    },
    computed: {
        bottomInfo() {
            let info = '';
            if (this.activeFlag == 0) info = this.Data.equipGenEvation;
            if (this.activeFlag == 1) info = this.Data.summaryOfResults;
            if (this.activeFlag == 2) info = this.Data.nextTime;
            return info;
        }
    },
    methods: {
        async BlurFn(Type) {

            if (Type == 2 && this.Data.subLabel[3].values[1] == "") {
                this.Data.subLabel[3].values[1] = "1.0";
            }

            console.log("Type", Type);
            let dataJson = {
                Type,
                PltCode: this.PltCode || this.$store.state.pltCode,
                Code: this.Code || -1,
                DmgCode: this.dmgCode,
                model: this.Data
            };
            let res = await UpdComprehensiveValue(dataJson);
            if (res.data.code != 0) {
                return
            }
            Object.assign(this.Data, res.data.data);
        },
        formateFn(value) {
            let result = this.$setMyNum(value, '1 - 1') > 1 ? '1.0' : this.$setMyNum(value, '1 - 1');
            return result
        },

        async GetComprehensiveEvaluationDataFn() {
            this.Data = {};
            this.DataClone = {};
            this.handleRow = {};
            let dataJson = {
                PltCode: this.PltCode || this.$store.state.pltCode,
                Code: this.Code || -1,
                DmgCode: this.dmgCode
            };
            let res = await GetComprehensiveEvaluationData(dataJson);
            if (res.data.code != 0) {

                res.data.data = {
                    "subLabel": [
                        {
                            "label": "(101) 適用法規による次回検査年(周期)",
                            "values": {
                                "1": "",
                                "2": ""
                            },
                            "combos": null
                        },
                        {
                            "label": "(102) 機器重要度による次回検査年(周期)",
                            "values": {
                                "1": null,
                                "2": null,
                                "3": ""
                            },
                            "combos": [

                            ]
                        },
                        {
                            "label": "(103) 劣化損傷による次回検査年",
                            "values": {
                                "1": ""
                            },
                            "combos": null
                        },
                        {
                            "label": "(104) 肉厚測定結果による次回検査年",
                            "values": {
                                "1": null,
                                "2": ""
                            },
                            "combos": null
                        },
                        {
                            "label": "(105) 汚れ／プロセスによる次回検査年(周期)",
                            "values": {
                                "1": "",
                                "2": ""
                            },
                            "combos": null
                        },
                        {
                            "label": "(106) 溶接補修による次回検査年",
                            "values": {
                                "1": ""
                            },
                            "combos": null
                        },
                        {
                            "label": "(107) 定期自主検査",
                            "values": {
                                "1": "",
                                "2": ""
                            },
                            "combos": null
                        },
                        {
                            "label": "適用法規:高圧ガス",
                            "values": {
                                "1": ""
                            },
                            "combos": null
                        },
                        {
                            "label": "最新開放年:",
                            "values": {
                                "1": ""
                            },
                            "combos": null
                        }
                    ],
                    "equipGenEvation": null,
                    "summaryOfResults": null,
                    "nextTime": null
                }

                // return

            }
            this.DataClone = _.cloneDeep(res.data.data);

            this.Data = _.cloneDeep(res.data.data);
            this.$emit('isAddFlgFn', false);
            //  无数据时，将表格重置为数组
            if (res.data.code == -310) {
                this.Data = {};
                this.DataClone = {};
                this.handleRow = {};
                return
            }


        },
    },

    created() {
    },
    mounted() {
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.CompontensViews {
    max-width: 71.2%;
    max-height: 93.7%;
    position: relative;
    overflow: scroll;
    border: 1px solid #ccc;

    .scroo {
        width: 994px;
        padding: 8px 6px 0 16px;

        .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 8px;

            .ipt {
                width: 70%;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .label {
                    margin-right: 8px;
                }

                .select-ipt {
                    width: 104px;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 104px;
                        height: 32px;
                    }
                }

                ::v-deep .el-input__suffix {
                    width: 32px;
                    right: 0;
                    background: #dee0e3;
                }

                ::v-deep .el-input__icon {
                    line-height: 32px;
                }

                .short-ipt {
                    width: 74px;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 74px;
                        height: 32px;
                    }
                }

                .right {
                    ::v-deep .el-input__inner {
                        text-align: right;
                    }
                }

                .long-ipt {
                    width: 142px;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 142px;
                        height: 32px;
                    }
                }

                .picker {
                    width: 142px;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 100%;
                    }

                    ::v-deep .el-input__suffix {
                        background: transparent;
                    }

                }

                span {
                    display: inline-block;
                    width: 35px;
                    height: 32px;
                    line-height: 32px;
                    margin: 0 8px 0 8px;
                }


            }

            .orange {
                ::v-deep .el-input__inner {
                    background-color: #FEDDB1;
                }
            }

            .yellow {
                ::v-deep .el-input__inner {
                    background: #ffffe1 !important;
                }
            }

            .center {
                ::v-deep .el-input__inner {
                    text-align: center;
                }
            }
        }

        .bs-tabs {
            margin-top: 12px;

            .el-button {
                margin-left: 0px;
                min-width: 155px;
                width: 155px;
                border-radius: 2px !important;
                height: 28px;
                line-height: 0;
            }
        }

        .iptarea {
            margin-top: 8px;
            width: 100%;
            height: 150px;
        }

        .yellow {
            ::v-deep .el-input__inner {
                background: #ffffe1 !important;
            }

            ::v-deep .el-textarea__inner {
                background: #ffffe1 !important;
            }
        }
    }
}
</style>
